<template>
  <div class="container">
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formData"
      label-width="168px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="complaintName" label="姓名">
            <el-input
              v-model="formData.complaintName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="complaintTel" label="联系人电话">
            <el-input
              class="borderRight"
              v-model="formData.complaintTel"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="complaintIdCard" label="身份证号">
            <el-input
              v-model="formData.complaintIdCard"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="complaintType" label="举报类型">
            <el-select
              class="selectWidth borderRight"
              v-model="formData.complaintType"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option label="拖欠工资" value="01"></el-option>
              <el-option label="劳务纠纷" value="02"></el-option>
              <el-option label="违法事件" value="03"></el-option>
              <el-option label="其他" value="04"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="complaintCompanyName" label="举报单位名称">
            <el-input
              v-model="formData.complaintCompanyName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="companyNameTel" label="单位联系电话">
            <el-input
              class="borderRight"
              v-model="formData.companyNameTel"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="单位地址">
            <el-input
              class="borderRight"
              v-model="formData.companyNameAddress"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="areaId" label="用工所在地">
            <el-cascader
              class="selectWidth"
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="isProject" label="是否工程项目">
            <el-select
              class="selectWidth borderRight"
              v-model="formData.isProject"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option label="是" value="0"></el-option>
              <el-option label="否" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目名称">
            <el-input
              class="borderRight"
              v-model="formData.projectName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="complaintContent" label="举报内容">
            <el-input
              class="borderRight borderBottom"
              v-model="formData.complaintContent"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item
            class="borderBottom borderRight changeBr"
            prop="fileList"
          >
            <span slot="label">
              <span>上传凭证</span><br />
              <span class="limitSize">（不超过2M）</span>
            </span>
            <el-upload
              :action="uploadUrl()"
              list-type="picture-card"
              accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="change"
              :on-error="error"
              :file-list="fileList"
              :limit="5"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              :visible.sync="dialogVisible"
              :modal-append-to-body="false"
              :append-to-body="true"
            >
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center; margin-top: 20px">
        <el-form-item>
          <el-button
            class="commonBut saveBtn"
            type="primary"
            @click="saveToResister"
            :loading="isSaveLoading"
            >提交登记</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'reportOnline',
  data() {
    var checkArea = (rule, value, callback) => {
      var that = this
      if (that.areaId.length < 1) {
        return callback(new Error('请选择用工所在地'))
      } else {
        callback()
      }
    }
    var checkUploadFile = (rule, value, callback) => {
      if (this.fileList.length === 0) {
        return callback(new Error('请上传凭证'))
      } else {
        callback()
      }
    }
    return {
      areaId: '', //用工所在地
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [], //上传凭证
      formData: {
        complaintName: '', //举报人
        complaintTel: '', //举报人手机号
        complaintIdCard: '', //举报人身份证号
        complaintType: '', //举报类型
        complaintCompanyName: '', //举报单位名称
        companyNameTel: '', //单位联系电话
        companyNameAddress: '', //单位地址、
        areaId: '', //用工所在地
        isProject: '', //是否工程项目
        projctName: '', //项目名称
        complaintContent: '', //举报内容
        fileList: [], //上传凭证
      },
      formRules: {
        complaintName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
        ],
        complaintTel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        complaintIdCard: [
          {
            required: true,
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确身份证号',
            trigger: 'blur',
          },
        ],
        complaintType: [
          {
            required: true,
            message: '请选择举报类型',
            trigger: 'change',
          },
        ],
        complaintCompanyName: [
          {
            required: true,
            message: '请输入举报单位名称',
            trigger: 'change',
          },
        ],
        companyNameTel: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        areaId: [
          {
            required: true,
            validator: checkArea,
            // message: "请选择用工所在地",
            trigger: 'change',
          },
        ],
        isProject: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        complaintContent: [
          {
            required: true,
            message: '请输入举报内容',
            trigger: 'blur',
          },
        ],
        fileList: [
          {
            required: true,
            // message: "请上传凭证",
            // trigger: "blur"
            validator: checkUploadFile,
            trigger: 'change',
          },
        ],
      },
      isSaveLoading: false, // 保存loading
    }
  },
  computed: {
    ...mapState(['areasOptions']),
  },
  created() {
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
  },
  methods: {
    ...mapActions(['getAreas']),
    handleClick() {},
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.formData.areaId = areaId
    },
    uploadUrl() {
      return common.uploadUrl + 'api-f/files/upload'
    },
    change(file, fileList) {
      this.fileList = fileList
    },
    beforeAvatarUpload(file) {
      var fileSize = file.size
      if (fileSize > 1024 * 1024 * 2) {
        this.$message({
          message: '最多能上传2M以内的图片',
          type: 'warning',
        })
        return false
      }
    },
    error(err, file, fileList) {
      this.$message.error('上传失败')
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //提交登记
    saveToResister() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.isSaveLoading = true
          this.$message({
            message: '提交成功',
            type: 'success',
          })
          this.$nextTick(() => {
            this.isSaveLoading = false
            this.$refs['formData'].resetFields()
            this.formData = {}
            this.areaId = ''
            this.fileList = []
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 0;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
  /deep/ .el-form-item__label {
    line-height: 36px;
    width: 168px;
    height: 48px;
    line-height: 48px;
    background: #f5f7fb;
    border-left: 1px solid #d5dee7;
    border-top: 1px solid #d5dee7;
  }
  /deep/ .el-input__inner {
    height: 48px;
    border-radius: 0;
    border-bottom: 0;
    border-right: 0;
  }
  /deep/ .el-form-item__error {
    top: 30px;
    left: 16px;
  }
  /deep/ .el-form-item.is-error .el-input__inner,
  .el-form-item.is-error .el-input__inner:focus,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner:focus,
  .el-message-box__input input.invalid,
  .el-message-box__input input.invalid:focus {
    border-color: #d5dee7;
  }
  .borderRight {
    border-right: 1px solid #dcdfe6;
  }
  .borderBottom {
    border-bottom: 1px solid #dcdfe6;
  }
  .selectWidth {
    width: 100%;
  }
  //换行
  /deep/ .changeBr .el-form-item__label {
    padding-top: 20px;
    height: 84px;
    line-height: 20px;
    border-right: 1px solid #dcdfe6;
    .limitSize {
      font-size: 12px;
      color: #999;
    }
  }
  /deep/ .changeBr .el-input__inner {
    height: 84px;
  }
  /deep/ .el-upload--picture-card {
    border: 1px solid #c0ccda;
    width: 60px;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
  }
  /deep/ .el-upload--picture-card i {
    font-size: 16px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail,
  /deep/ .el-upload-list--picture-card .el-upload-list__item-actions,
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    margin: 0 12px 0px 0;
  }
  /deep/ .changeBr .el-form-item__content {
    padding-left: 20px;
    padding-top: 12px;
  }
  /deep/ .changeBr .el-form-item__error {
    margin-top: 40px;
  }
}
</style>
